<template>
  <div class="app_model">
    <div class="app_top">
      <ul>
        <li>
          <i class="el-icon-close" @click="off"></i>
        </li>
        <li>
          <p>{{ openTitle }}（{{ titledatalanglis }}）</p>
          <p style="font-size: 15px">模型类型 实体编码符</p>
        </li>
        <!-- <li style="color: blue" @click=";(dialogVisible = true), setList()">查春详情>>></li> -->
      </ul>
    </div>
    <div class="app_buttom">
      <el-table :data="nodeTablelist" border style="width: 100%">
        <el-table-column prop="columnName" label="英文名称" width="180"></el-table-column>
        <el-table-column prop="columnComment" label="中文名" width="180"> </el-table-column>
        <el-table-column prop="dataType" label="数据类型"> </el-table-column>
        <el-table-column prop="relation" label="关联宇典表/字段"> </el-table-column>
        <el-table-column prop="valueBz" label="值域标识"> </el-table-column>
      </el-table>
    </div>

    <el-dialog title="查春详情" :visible.sync="dialogVisible" width="30%">
      <div style="width: 100%; padding: 30px">
        <el-table ref="table" :key="tableKey" v-loading="listLoading" element-loading-text="正在加载，请稍后" :data="list" border fit highlight-current-row style="width: 100%" max-height="400px">
          <el-table-column v-for="(item, index) in headList" :label="item" min-width="150px">
            <template slot-scope="{ row }">
              <span>{{ row[item] }}</span>
            </template>
          </el-table-column>
        </el-table>
        <pagination v-show="total > 0" :total="total" :page.sync="listQuery.pageNum" :limit.sync="listQuery.pageSize" :page-sizes="pageArray" @pagination="setList" />
      </div>
    </el-dialog>
  </div>
</template>
<script>
import Pagination from '@/components/Pagination'

import { getDetail } from '@/api/masterdata/detailTable'
export default {
  props: ['TableId', 'nodeTablelist', 'openTitle', 'titledatalanglis'],
  components: {
    Pagination,
  },
  data() {
    return {
      list: [],
      tableKey: 0,
      title: '河流标识表',
      titledata: 'code_rv',
      tableData: [],
      dialogVisible: false,
      listLoading: false,
      headList: [],
      total: 0,
      pageArray: this.$store.getters.pageArray,
      listQuery: {
        tableId: undefined,
        tableName: undefined,
        page: 1,
        coreDataModel: 1,
        limit: this.$store.getters.defaultPageSize,
      },
    }
  },

  methods: {
    setList() {
      this.listQuery.tableId = this.TableId
      getDetail(this.listQuery).then((res) => {
        console.log(res, '列信息')
        if (res.data.code == 200) {
          this.headList = res.data.data.columnNameList

          this.list = res.data.data.pageResult.data
          this.total = res.data.data.pageResult.total
        } else {
          this.$message.error(res.data.msg)
        }
      })
    },
    off() {
      this.$emit('onIcon')
    },
  },
}
</script>
<style lang="scss" scoped>
.app_model {
  width: 100%;
  height: 100%;
  .aap_top {
    width: 100%;
    height: 5%;
  }
  ul {
    width: 100%;
    height: 100%;
    display: flex;
    list-style: none;
    align-items: center;
  }
  li:nth-child(1) {
    width: 10%;
    height: 100%;
  }
  li:nth-child(2) {
    flex: 1;
    height: 100%;
  }
  li:nth-child(3) {
    width: 20%;
    height: 100%;
  }
  .app_buttom {
    width: 100%;
    height: 95%;
  }
}
</style>
